/* stylelint-disable value-keyword-case */
:root{
  --space: 4px;
  --space-2x: 8px;
  --space-4x: 16px;
  --space-8x: 32px;
  --space-16x: 64px;
  --space-24x: 96px;
  --space-32x: 128px;
  --space-48x: 192px;
  --space-64x: 256px;
  --space-mini: 24px;
  --space-small: 32px;
  --space-medium: 40px;
  --space-large: 48px;
  --space-gap: 24px;
  --space-gap-half: 12px;
  --space-gap-quarter: var(--space-2x);
  --gap: var(--space-gap);
  --gap-half: var(--space-gap-half);
  --gap-quarter: var(--space-gap-quarter);
  --gap-double: var(--space-large);
  --space-negative: -4px;
  --space-2x-negative: -8px;
  --space-4x-negative: -16px;
  --space-8x-negative: -32px;
  --space-16x-negative: -64px;
  --space-24x-negative: -96px;
  --space-32x-negative: -128px;
  --space-48x-negative: -192px;
  --space-64x-negative: -256px;
  --space-mini-negative: -24px;
  --space-small-negative: -32px;
  --space-medium-negative: -40px;
  --space-large-negative: -48px;
  --space-gap-negative: -24px;
  --space-gap-half-negative: -12px;
  --space-gap-quarter-negative: var(--space-2x-negative);
  --gap-negative: var(--space-gap-negative);
  --gap-half-negative: var(--space-gap-half-negative);
  --gap-quarter-negative: var(--space-gap-quarter-negative);
  --gap-double-negative: var(--space-large-negative);
  --page-margin: var(--space-gap);
  --page-width: 1000px;
  --page-width-with-margin: 1200px;
  --page-width-post:768px;
  --radius: 5px;
  --marketing-radius: 8px;
  --font-sans: "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  --font-mono: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace;
  --header-height: 80px;
  --footer-foreground: hsla(0,0%,100%,1);
  --form-large-font: 1rem;
  --form-large-line-height: 1.5rem;
  --form-large-height: var(--space-large);
  --form-small-font: 0.875rem;
  --form-small-line-height: 0.875rem;
  --form-small-height: var(--space-mini);
  --form-mini-height: var(--space-small);
  --form-font: 0.875rem;
  --form-line-height: 1.25rem;
  --form-height: var(--space-medium);
  --success-lighter: #d3e5ff;
  --success-light: #3291ff;
  --success: #0070f3;
  --success-dark: #0761d1;
  --error-lighter: #f7d4d6;
  --error-light: #ff1a1a;
  --error: #e00;
  --error-dark: #c50000;
  --warning-lighter: #ffefcf;
  --warning-light: #f7b955;
  --warning: #f5a623;
  --warning-dark: #ab570a;
  --violet-lighter: #d8ccf1;
  --violet-light: #8a63d2;
  --violet: #7928ca;
  --violet-dark: #4c2889;
  --violet-background: #fff;
  --violet-background-secondary: #291c3a;
  --violet-background-tertiary: #eae5f4;
  --background-rgb: 255,255,255;
  --foreground-rgb: 0,0,0;
  --console-header: #efe7ed;
  --console-purple: #7928ca;
  --console-text-color-default: var(--foreground);
  --console-text-color-blue: #0070f3;
  --console-text-color-pink: #eb367f;
  --console-text-color-purple: #7928ca;
  --cyan-lighter: #aaffec;
  --cyan-light: #79ffe1;
  --cyan: #50e3c2;
  --cyan-dark: #29bc9b;
  --highlight-purple: #f81ce5;
  --highlight-magenta: #eb367f;
  --highlight-pink: #ff0080;
  --highlight-yellow: #fff500;
  --accents-1: #fafafa;
  --accents-2: #eaeaea;
  --accents-3: #999;
  --accents-4: #888;
  --accents-5: #666;
  --accents-6: #444;
  --accents-7: #333;
  --accents-8: #111;
  --secondary-lighter: var(--accents-2);
  --secondary-light: var(--accents-3);
  --secondary: var(--accents-5);
  --secondary-dark: var(--accents-7);
  --dropdown-box-shadow: 0 4px 4px 0 rgba(0,0,0,0.02);
  --dropdown-triangle-stroke: #fff;
  --portal-opacity: 0.25;
  --wv-green: #0cce6b;
  --wv-orange: #ffa400;
  --wv-red: #ff4e42;
}
@media (prefers-color-scheme: light) {
  :root{
    --foreground: #000;
    --background: #fff;
    --selection: var(--cyan-light);
    --link-color: var(--success);
    --marketing-gray: #fafbfc;
    --code: var(--highlight-purple);
    --dropdown-box-shadow: 0 0 0 1px var(--accents-2);
    --dropdown-triangle-stroke: #333;
    --scroller-start: #fff;
    --scroller-end: hsla(0,0%,100%,0);
    --header-background: hsla(0,0%,100%,0.8);
    --footer-background: hsla(0,0%,0%,1);
    --footer-foreground: hsla(0,0%,100%,1);
    --header-border-bottom: inset 0 -1px 0 0 rgba(0,0,0,0.1);
    --header-import-flow-background: hsla(0,0%,98%,0.8);
    --shadow-smallest: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-extra-small: 0 4px 8px rgba(0,0,0,0.12);
    --shadow-small: 0 5px 10px rgba(0,0,0,0.12);
    --shadow-medium: 0 8px 30 rgba(0,0,0,0.12);
    --shadow-large: 0 30 60 rgba(0,0,0,0.12);
    --shadow-hover: 0 30 60 rgba(0,0,0,0.12);
    --shadow-sticky: 0 12px 10 -10 rgba(0,0,0,0.12);
    --portal-opacity: 0.75;
    --violet-background: #291d3a;
    --violet-background-secondary: #211830;
    --violet-background-tertiary: #211830;
    --background-rgb: 0,0,0;
    --foreground-rgb: 255,255,255;
    --console-header: #0f0310;
    --console-purple: #8a63d2;
    --console-text-color-blue: #3291ff;

  }
}
@media (prefers-color-scheme: dark) {
  :root{
    --foreground:#fff;
    --background:#000;
    --selection: var(--highlight-purple);
    --accents-8: #fafafa;
    --accents-7: #eaeaea;
    --accents-6: #999;
    --accents-5: #888;
    --accents-4: #666;
    --accents-3: #444;
    --accents-2: #333;
    --accents-1: #111;
    --secondary-lighter: var(--accents-2);
    --secondary-light: var(--accents-3);
    --secondary: var(--accents-5);
    --secondary-dark: var(--accents-7);
    --link-color: var(--success-light);
    --marketing-gray: var(--accents-1);
    --code: var(--cyan-light);
    --error-light: #f33;
    --error: red;
    --error-dark: #e60000;
    --dropdown-box-shadow: 0 0 0 1px var(--accents-2);
    --dropdown-triangle-stroke: #333;
    --scroller-start: #000;
    --scroller-end: transparent;
    --header-background: rgba(0,0,0,0.5);
    --footer-background: hsla(0,0%,0%,1);
    --footer-foreground: var(--accents-6);
    --header-border-bottom: inset 0 -1px 0 0 hsla(0,0%,100%,0.1);
    --header-import-flow-background: hsla(0,0%,7%,0.8);
    --shadow-smallest: 0 0 0 1px var(--accents-2);
    --shadow-extra-small: 0 0 0 1px var(--accents-2);
    --shadow-small: 0 0 0 1px var(--accents-2);
    --shadow-medium: 0 0 0 1px var(--accents-2);
    --shadow-large: 0 0 0 1px var(--accents-2);
    --shadow-sticky: 0 0 0 1px var(--accents-2);
    --shadow-hover: 0 0 0 1px var(--foreground);
    --portal-opacity: 0.75;
    --violet-background: #291d3a;
    --violet-background-secondary: #211830;
    --violet-background-tertiary: #211830;
    --background-rgb: 0,0,0;
    --foreground-rgb: 255,255,255;
    --console-header: #0f0310;
    --console-purple: #8a63d2;
    --console-text-color-default: var(--foreground);
    --console-text-color-blue: #3291ff;
    --console-text-color-pink: #eb367f;
  }
}
[theme='light'] {
  --foreground: #000;
  --background: #fff;
  --selection: var(--cyan-light);
  --link-color: var(--success);
  --marketing-gray: #fafbfc;
  --code: var(--highlight-purple);
  --dropdown-box-shadow: 0 0 0 1px var(--accents-2);
  --dropdown-triangle-stroke: #333;
  --scroller-start: #fff;
  --scroller-end: hsla(0, 0%, 100%, 0);
  --header-background: hsla(0, 0%, 100%, 0.8);
  --footer-background: hsla(0, 0%, 0%, 1);
  --footer-foreground: hsla(0, 0%, 100%, 1);
  --header-border-bottom: inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
  --header-import-flow-background: hsla(0, 0%, 98%, 0.8);
  --shadow-smallest: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-extra-small: 0 4px 8px rgba(0, 0, 0, 0.12);
  --shadow-small: 0 5px 10px rgba(0, 0, 0, 0.12);
  --shadow-medium: 0 8px 30 rgba(0, 0, 0, 0.12);
  --shadow-large: 0 30 60 rgba(0, 0, 0, 0.12);
  --shadow-hover: 0 30 60 rgba(0, 0, 0, 0.12);
  --shadow-sticky: 0 12px 10 -10 rgba(0, 0, 0, 0.12);
  --portal-opacity: 0.75;
  --violet-background: #291d3a;
  --violet-background-secondary: #211830;
  --violet-background-tertiary: #211830;
  --background-rgb: 0, 0, 0;
  --foreground-rgb: 255, 255, 255;
  --console-header: #0f0310;
  --console-purple: #8a63d2;
  --console-text-color-blue: #3291ff;
}

[theme='dark'] {
  --foreground: #fff;
  --background: #000;
  --selection: var(--highlight-purple);
  --accents-8: #fafafa;
  --accents-7: #eaeaea;
  --accents-6: #999;
  --accents-5: #888;
  --accents-4: #666;
  --accents-3: #444;
  --accents-2: #333;
  --accents-1: #111;
  --secondary-lighter: var(--accents-2);
  --secondary-light: var(--accents-3);
  --secondary: var(--accents-5);
  --secondary-dark: var(--accents-7);
  --link-color: var(--success-light);
  --marketing-gray: var(--accents-1);
  --code: var(--cyan-light);
  --error-light: #f33;
  --error: red;
  --error-dark: #e60000;
  --dropdown-box-shadow: 0 0 0 1px var(--accents-2);
  --dropdown-triangle-stroke: #333;
  --scroller-start: #000;
  --scroller-end: transparent;
  --header-background: rgba(0, 0, 0, 0.5);
  --footer-background: hsla(0, 0%, 0%, 1);
  --footer-foreground: var(--accents-6);
  --header-border-bottom: inset 0 -1px 0 0 hsla(0, 0%, 100%, 0.1);
  --header-import-flow-background: hsla(0, 0%, 7%, 0.8);
  --shadow-smallest: 0 0 0 1px var(--accents-2);
  --shadow-extra-small: 0 0 0 1px var(--accents-2);
  --shadow-small: 0 0 0 1px var(--accents-2);
  --shadow-medium: 0 0 0 1px var(--accents-2);
  --shadow-large: 0 0 0 1px var(--accents-2);
  --shadow-sticky: 0 0 0 1px var(--accents-2);
  --shadow-hover: 0 0 0 1px var(--foreground);
  --portal-opacity: 0.75;
  --violet-background: #291d3a;
  --violet-background-secondary: #211830;
  --violet-background-tertiary: #211830;
  --background-rgb: 0, 0, 0;
  --foreground-rgb: 255, 255, 255;
  --console-header: #0f0310;
  --console-purple: #8a63d2;
  --console-text-color-default: var(--foreground);
  --console-text-color-blue: #3291ff;
  --console-text-color-pink: #eb367f;
}